<!--  -->
<template>
  <div v-show="show == 2" class="forgetBox">
    <div id="forget" v-show="!gologin">
      <div class="title">
        <p>忘记密码</p>
        <i
          class="icon"
          :class="{
            icon5: urlParams.version == 5,
            icon6: urlParams.version == 6,
          }"
        ></i>
      </div>
      <div
        class="input_line input_phone clear"
        :class="{ active: curFocus == 'phone' }"
      >
        <input
          class="fl"
          type="text"
          name="phoneNumber"
          @focus="curFocus = 'phone'"
          @blur="curFocus = ''"
          v-model.trim="send.phoneNumber"
          placeholder="输入手机号"
        />
      </div>
      <div
        class="input_line input_phoneAuthCode clear"
        :class="{ active: curFocus == 'AuthCode' }"
      >
        <input
          class="fl"
          type="text"
          name="phoneAuthCode"
          @focus="curFocus = 'AuthCode'"
          @blur="curFocus = ''"
          v-model.trim="send.phoneAuthCode"
          maxlength="6"
          placeholder="短信验证码"
        />
        <span
          class="authcode fr"
          :class="{ gray: authStatus == 1 }"
          @click="getAuthCode"
          >{{ authStatus == 0 ? "获取验证码" : count }}</span
        >
      </div>
      <div
        class="input_line input_password clear"
        :class="{ active: curFocus == 'password' }"
      >
        <label class="passRight" for="password"> 新密码</label>
        <input
          class="fl"
          :type="display ? 'text' : 'password'"
          name="password"
          @focus="curFocus = 'password'"
          @blur="curFocus = ''"
          v-model.trim="send.password"
          placeholder="6-20位(须含数字和英文)"
        />
        <label class="fr" for="password" @click="display = !display">
          <i
            class="icon"
            :class="{ 'sp-bukejian': !display, 'sp-kejian-copy': display }"
          ></i>
        </label>
      </div>
      <!-- 确认密码 -->
      <div
        class="input_line input_password1 affirm clear"
        :class="{ active: curFocus == 'notarize' }"
      >
        <label class="passRight" for="notarize">确认密码</label>
        <input
          class="fl"
          :type="notarizeShow ? 'text' : 'password'"
          name="notarize"
          @focus="curFocus = 'notarize'"
          @blur="curFocus = ''"
          v-model.trim="notarize"
          placeholder="6-20位(须含数字和英文)"
        />
        <label class="fr" for="notarize" @click="notarizeShow = !notarizeShow">
          <i
            class="icon"
            :class="{
              'sp-bukejian': !notarizeShow,
              'sp-kejian-copy': notarizeShow,
            }"
          ></i>
        </label>
      </div>

      <p class="member">
        已有账号？<span class="login_ref" @click="toggleType(0)">立即登录</span>
      </p>
    </div>
    <div id="backLogin" v-show="gologin">
      <p>
        <span>{{ reciprocal }}s</span>后将进入登录页面
      </p>
      <input type="submit" value="立即登录" @click="toggleType(0)" />
    </div>
    <div
      class="hint"
      :class="{ error: errors, success: success }"
      v-show="errors || success"
    >
      <i
        class="icon"
        :class="{ 'sp-tixing': errors, 'sp-duihao': success }"
      ></i>
      {{ errors || success }}
    </div>
    <input
      type="submit"
      :class="{
        submit5: urlParams.version == 5,
        submit6: urlParams.version == 6,
      }"
      value="重置"
      v-show="!gologin"
      @click="submit"
    />
    <authCode
      :show.sync="authShow"
      @cancel="authShow = false"
      @showError="showError"
      @confirm="confirm"
    ></authCode>
  </div>
</template>

<script>
const authCode = () => import("./authCode");
import { forget } from "../mixinsv2.1.0/forget";
import { CLIENT } from "@/common/const";
export default {
  mixins: [forget],
  props: {
    show: {
      default: 0,
      type: Number,
    },
  },
  watch: {
    show(num) {
      if (num == 2) {
        this.gologin = false;
        this.initialize();
      }
    },
  },
  data() {
    return {
      notarizeShow: 0,
      notarize: "", //确认密码
      path: CLIENT,
      curFocus: "",
      errors: "",
      success: "",
      gologin: false,
      authShow: false,
      toggle: 0,
      display: 0,
      reciprocal: 3,
      send: {
        phoneNumber: "",
        phoneAuthCode: "",
        oldPassword: "",
        password: "",
      },
      authStatus: 0,
      count: "",
      urlParams: this.$fn.getUrlParams(),
    };
  },

  components: {
    authCode: authCode,
  },

  computed: {},

  mounted() {},
};
</script>
<style lang="scss" scoped>
.forgetBox {
  padding: 21px 20px 0;
  box-sizing: border-box;
  .title {
    color: #333333;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    position: relative;
    height: 35px;
    margin-bottom: 30px;
    .icon {
      display: inline-block;
      width: 38px;
      height: 4px;
      position: absolute;
      left: 50%;
      margin-top: 8px;
      margin-left: -19px;
      background: #9363ff;
    }
  }
}
.input_line {
  // width: 279px;
  width: 285px;

  height: 40px;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  box-sizing: border-box;
  transition: all 0.3s;
  &.active {
    border: 1px solid #888888;
    input {
      color: #333333;
    }
  }
  label {
    text-align: center;
    height: 100%;
    width: 40px;
    &::after {
      content: "";
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
    }
    .icon {
      display: inline-block;
      vertical-align: middle;
    }
  }
  input {
    box-sizing: border-box;
    font-size: 14px;
    color: #474747;
    height: 38px;
    padding-left: 9px;
    line-height: 38px;
    background: transparent;
    outline: none;
    border: none;
  }
  // 密码
  .passRight {
    width: 90px;
    font-size: 16px;
    color: #666666;
    padding-left: 10px;
    text-align: left;
  }
}
.input_phone {
  margin-bottom: 10px;
  input {
    width: 100%;
  }
}
.input_phoneAuthCode {
  margin-bottom: 10px;
  &.active {
    .authcode {
      border-left: 1px solid #888888;
    }
  }
  input {
    width: 149px;
  }
  .authcode {
    display: inline-block;
    height: 38px;
    width: 99px;
    text-align: center;
    line-height: 38px;
    border-left: 1px solid #bdbdbd;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    color: #5592e5;
    cursor: pointer;
    &.gray {
      color: #888888;
      cursor: no-drop;
    }
  }
}
.input_password {
  input {
    width: 226px;
    font-size: 12px;
  }
  label:last-child {
    cursor: pointer;
  }
}
#backLogin {
  width: 358px;
  height: 493px;
  text-align: center;
  margin: -50px -26px 0;
  position: relative;
  background: url(../images/czcg_bg2.png) no-repeat center;
  img {
    display: inline-block;
  }
  p {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    text-align: center;
    padding-top: 211px;
    span {
      color: #fff600;
      padding-right: 10px;
    }
  }
  input {
    width: 306px;
    position: absolute;
    bottom: 54px;
    left: 50%;
    margin-left: -153px;
  }
}
.hint {
  position: absolute;
  font-size: 14px;
  line-height: 30px;
  font-weight: 400;
  &.error {
    color: #ee7625;
  }
  &.success {
    color: #5592e5;
  }
  .icon {
    position: relative;
    top: 1px;
    display: inline-block;
  }
}

input[type="submit"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 279px;
  font-size: 18px;
  margin-top: 35px;
  font-weight: 400;
  border: none;
  outline: none;
  color: #fff;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  display: block;
  border-radius: 5px;
  background: linear-gradient(to right, #7042ce, #9254d2);
}
input[type="submit"]:disabled {
  cursor: no-drop;
  background-image: linear-gradient(
    to right,
    rgba(112, 66, 206, 0.5),
    rgba(146, 84, 210, 0.5)
  );
}
.member {
  padding-top: 16px;
  font-size: 14px;
  color: #666666;
  text-align: right;
  .login_ref {
    color: #5592e5;
    cursor: pointer;
  }
}
.affirm {
  margin-top: 10px;
  display: flex;
}
</style>
